<template>
  <div class="box1">
    <div class="box2">
      <h3>登录</h3>
      <span class="welcome">欢迎访问，青春有我</span>
      <div class="box3">
        <div>
          <input
            type="text"
            placeholder="请输入账号"
            onfocus="placeholder=''"
            onblur="placeholder='请输入账号'"
            id="id"
            v-model="data.id"
          /><!--onfocus聚焦，onblur失去焦点-->
          <div id="warning1"></div>
          <!--行内元素不能设置宽、高-->
        </div>
        <div>
          <input
            type="password"
            placeholder="请输入密码"
            onfocus="placeholder=''"
            onblur="placeholder='请输入密码'"
            id="password"
            v-model="data.password"
          />
          <div id="warning2"></div>
        </div>
        <div class="distinguish">
          <input
            type="text"
            id="code_input"
            placeholder=" 请输入验证码"
            v-model="value"
          />
          <!--删除value属性，否则报 Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.-->
          <div id="v_container"></div>
        </div>
        <div id="warning3"></div>
      </div>
      <div class="found">忘记密码</div>
      <!--<router-link @click="login" :to="path"><button>登录</button></router-link>-->
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import { GVerify } from '@/assets/utils/gverify.js'
//import { createApp } from 'vue'
export default {
  data() {
    return {
      value: '',
      verifyCode: '1',
      data: {
        username: null,
        id: null,
        password: null
      },
      path: '/loginPage'
    }
  },
  mounted() {
    this.verifyCode = new GVerify('v_container')
  },
  methods: {
    login() {
      //直接接口名，main.js中声明了baseURL
      if (
        this.data.id == null ||
        this.data.id.trim() == null ||
        this.data.password == null ||
        this.data.password.trim() == null
      ) {
        if (this.data.id == null || this.data.id.trim() == null)
          document.getElementById('warning1').innerHTML = '账户不能为空'
        if (this.data.password == null || this.data.password.trim() == null)
          document.getElementById('warning2').innerHTML = '密码不能为空'
        return
      }
      console.log('传参')
      console.log(this.verifyCode)
      if (this.verifyCode.validate(this.value)) {
        this.$http
          .post({
            url: 'infoservice/userinfo/loginByPhone',
            data: JSON.stringify(this.data)
          })
          .then((response) => {
            console.log(response)
          })
          .catch((response) => {
            this.data.id = null
            this.data.password = null
            console.log(response)
            alert('登陆失败，可能原因是员工号或密码输入有误！')
          })
        // if (this.data.id === '11111111111' && this.data.password === '123456') {
        //   this.path = '/indexPage'
        //   this.$router.push(this.path)
        // } else return
      } else {
        document.getElementById('warning3').innerHTML = '验证码错误'
        this.verifyCode.refresh()
        return
      }
    }
  }
}
/*createApp({
  data() {
    return {
      data: [
        {
          id: 1,
          password: 2
        }
      ]
    }
  }
}).mount('.box2')*/
</script>

<style lang="less" scoped>
.box1 {
  width: 24rem;
  height: 13.5875rem;
  position: relative; // app.vue是以back.png作为背景图片的
  //background: url('@/assets/back.png');
}
.box2 {
  position: absolute;
  right: 2.5rem;
  top: 1.875rem;
  width: 6.25rem;
  height: 7.5rem;
  background-color: blue;
}
h3 {
  padding-left: 0.375rem;
  display: inline-block;
  font-family: monospace;
  font-weight: 600;
  color: #ffd700;
}
.welcome {
  font-size: 0.67em;
  padding-left: 0.375rem;
  font-family: monospace;
}
.box3 {
  width: 100%;
  height: 3rem;
  margin-top: 0.125rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#id,
#password {
  width: 4.5rem;
  height: 0.4375rem;
  text-indent: 10%; // 文本框输入文字与左边的距离
  background-position: 0;
  background-repeat: no-repeat; //去除背景重复
  background-size: 0.4375rem 0.4375rem; // 图片尺寸
  border-radius: 0.125rem; // 圆角
  border: 1.5px solid #000;
  outline: none; /*outline外边框，input:focus聚焦*/
}
#id {
  background-image: url('@/assets/image/用户.png');
}
#password {
  background-image: url('@/assets/image/密码.png');
}
#id:focus {
  //background-size: 0 0;
  border-style: solid;
  border-color: rgb(156, 220, 254);
}
#password:focus {
  //background-image: none;
  border-style: solid;
  border-color: rgb(156, 220, 254);
}

/*#id::before {
  // 类名::before，伪类
  content: '';
  background: url('@/assets/用户.png');
  width: 0.4375rem;
  height: 0.4375rem;
}*/
::-webkit-input-placeholder {
  font-family: 'Courier New', Courier, monospace;
  //padding-left: 0.5rem;
  color: #999 !important;
}
.distinguish {
  width: 4.5rem;
  height: 0.4375rem;
}
#code_input {
  width: 40%;
  height: 100%;
  float: left;
  border-radius: 0.125rem; // 圆角
  border: 1.5px solid #ccc;
  outline: none; /*outline外边框，input:focus聚焦*/
}
#v_container {
  width: 54%;
  height: 150%;
  //background-color: #ccc;
  float: right;
}
.found {
  float: right;
  font-size: 0.67em;
  padding-right: 0.375rem;
  font-family: monospace;
  color: rgb(0, 122, 204);
  text-decoration: underline; // 下划线
}
button {
  margin-top: 0.825rem;
  margin-left: 2.05rem;
  // transform: translate(-50%, -50%);子绝父相，居中。现今父元素是绝对定位
  width: 2.05rem;
  height: 30px;
  font-size: 20px;
  font-family: '华文行楷';
  background-color: rgb(106, 180, 234);
  border: 0;
}
#warning1,
#warning2,
#warning3 {
  width: 1.55rem;
  font: normal 400 8px '微软雅黑 Light';
  color: crimson;
  margin-left: 0.125rem;
}
</style>
